<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <span>{{msg | dateStr}}</span>
        <span>{{age | dateAge}}</span>
        <span v-focus>{{msg}}</span>
    </div>


</body>
<script src="./js/vue.js" type="text/javascript"></script>
<script>
      //定义过滤器
       Vue.filter("dateStr",function (value) {
           return value.toUpperCase()
       })
      Vue.directive("focus",function (el) {
          el.innerHTML=el.innerHTML.toUpperCase();
      })

      new Vue({
            el:"#app",
            data:{
                msg:"hello filter",
                age:17
            },
          directives:{
              "focus":function (el) {

                  el.innerHTML=el.innerHTML.toUpperCase();
              }
          },
                filters:{
                    "dateAge":function (value) {
                        return value+1;
                    }
                }
        });
</script>
</html>